<template>
	<view class="tabs">
		<tui-tabs :tabs="newColumnTabs" :currentTab="pageData.tabIndex" field="columnName" sliderBgColor='#FE1E52'
			selectedColor='#FE1E52' @change="change"></tui-tabs>
		<swiper class="tab-box" ref="swiper1" :current="pageData.tabIndex" :duration="300" @change="onswiperchange"
			@transition="onswiperscroll" @animationfinish="animationfinish" @onAnimationEnd="animationfinish">
			<swiper-item class="swiper-item" v-for="(page, index) in newColumnTabs" :key="index">
				<div class="swiper-item" :nid="page.id">
					<news-page :nid="page.id" class="page-item" :ref="el=>{tabListRef[index]=el}"></news-page>
				</div>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import {
		nextTick
	} from "vue";
	import newsPage from "./news/page.vue"
	// #ifdef APP-PLUS
	const dom = weex.requireModule('dom');
	// #endif
	import bizNewColumnApi from '@/api/biz/biz-newcolumn-api'
	// import Item from "./item.vue"
	import store from '@/store'
	import {
		reactive,
		ref,
		getCurrentInstance,
		computed
	} from "vue"
	const pageData = reactive({
		tabIndex: 0,
		swiperWidth: 0,
		cacheTab: [],
		scrollInto: "",
		navigateFlag: false,
		indicatorLineLeft: 0,
		indicatorLineWidth: 0,
		isTap: false,
		tabListSize: {},
		pageList: []
	})
	const newColumnTabs = ref([])
	const curView = ref('')
	const currentTab = ref('')
	const tabListRef = ([])


	const change = (item) => {
		pageData.tabIndex = item.index
		currentTab.value = item.index
		tabListRef[item.index].loadData(true)
		// switchTab(item.index)
	}
	const loadColumn = () => {
		bizNewColumnApi.newColumnListAll({}).then(res => {
			newColumnTabs.value = res
			nextTick(()=>{
				tabListRef[0].loadData(true)
			})
		})
	}
	loadColumn()



	// 更新
	const updateIndicator = (left, width) => {
		pageData.pageindicatorLineLeft = left
		pageData.indicatorLineWidth = width
	}
	// 切换tab
	const switchTab = (index) => {
		// if (pageData.pageList[index].dataList.length === 0) {
		//   loadTabData(index);
		// }
		if (pageData.tabIndex === index) {
			return;
		}

		pageData.tabIndex = index

		tabListRef.value[index].loadData()
		// loadTabData()
	}

	const animationfinish = (e) => {
		// // #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
		// let index = e.detail.current;
		// if (pageData._touchTabIndex === index) {
		//   pageData.isTap = false;
		// }
		// pageData._lastTabIndex = index;
		// pageData.switchTab(index);
		// pageData.updateIndicator(pageData.tabListSize[index].left, pageData.tabListSize[index].width);
		// // #endif
	}
	const loadTabData = (index) => {
		pageRef.pageList[index].loadData();
	}
	const clearTabData = (index) => {
		pageData.pageList[index].clear();
	}

	const onswiperchange = (e) => {
		// 注意：百度小程序会触发2次
		// #ifndef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
		let index = e.target.current || e.detail.current;
		switchTab(index);
		// #endif
	}
</script>

<style>
	page {
		width: 100%;
		min-height: 100%;
		display: flex;
	}
	.tabs {
	  flex: 1;
	  flex-direction: column;
	  overflow: hidden;
	  background-color: #ffffff;
	  /* #ifdef MP-ALIPAY || MP-BAIDU */
	  height: 100vh;
	  /* #endif */
	}
	.tab-box{
		flex: 1;
		height: 100%;
	}
	.swiper-item {
	  flex: 1;
	  flex-direction: column;
	}
	
	.page-item {
	  flex: 1;
	  flex-direction: row;
	  position: absolute;
	  left: 0;
	  top: 0;
	  right: 0;
	  bottom: 0;
	}
</style>